<template>
	<div class="modal-container">
		<el-dialog title="商品出入库" width="1000px" custom-class="modal-points-add" :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" :closed="on_closed">
			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">仓库</div>
						<div class="input-item">
							<el-select clearable v-model="form.storeId" placeholder="仓库">
								<el-option v-for="item in storeList" :key="item.id" :label="item.title"
									:value="item.id">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">类型</div>
						<div class="input-item">
							<el-radio-group v-model="form.type">
								<el-radio :label="1">入库</el-radio>
								<el-radio :label="2">出库</el-radio>
							</el-radio-group>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">操作类型</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.typeDesc" placeholder="操作类型"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">备注</div>
						<div class="input-item">
							<el-input clearable type="textarea" v-model="form.remark" placeholder="备注"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">申请人</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.applyName" placeholder="申请人"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">相关商品</div>
						<div class="input-item">
							<el-button type="primary" @click="do_add_product()"> 增加商品 </el-button>
						</div>
					</div>


					<div class="table-wrap">
						<div class="table-sec">
							<div class="table-box">
								<el-table ref="multipleTable" :data="list_product" fit stripe highlight-current-row
									min-width="100px" style="width: 100%">
									<!-- @selection-change="handleSelectionChange1" -->
									<!-- <el-table-column type="selection" width="55"> </el-table-column> -->

									<el-table-column label="图片" width="80px">
										<template slot-scope="scope">
											<span class="cus-poster">
												<!-- <img :src="'https://omo-oss-image.thefastimg.com/' + scope.row.image_2b5N8b00" alt="" class="cate-poster" /> -->
												<el-image style="width: 30px; height: 30px" :src="scope.row.thumb"
													:preview-src-list="[scope.row.thumb]">
												</el-image>
											</span>
										</template>
									</el-table-column>
									<el-table-column label="产品名称">
										<template slot-scope="scope">
											<span>{{ scope.row.title }}</span>
										</template>
									</el-table-column>
									<el-table-column label="产品规格">
										<template slot-scope="scope">
											<span>{{ scope.row.keyVals }}</span>
										</template>
									</el-table-column>
									<el-table-column label="分类">
										<template slot-scope="scope">
											<span class="cus-miaoshu">{{ scope.row.channelTitle }}</span>
										</template>
									</el-table-column>
									<el-table-column label="产品价格">
										<template slot-scope="scope">
											<span>{{ scope.row.priceSale }}</span>
										</template>
									</el-table-column>


									<el-table-column label="出入库数量">
										<template slot-scope="scope">
											<div class="input-box">
												<el-input v-model="scope.row.action_num" placeholder="出入库数量"></el-input>
											</div>
										</template>
									</el-table-column>

									<el-table-column fixed="right" label="操作" width="50px">
										<template slot-scope="scope">
											<el-link type="primary" @click="product_remove(scope.row)">移除</el-link>
										</template>
									</el-table-column>
								</el-table>
							</div>


						</div>
					</div>

				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>

		<product_guige_choose_modal ref="product_guige_choose_modal" @confirm="confirm_choose_guige" />
	</div>
</template>

<script>
import product_guige_choose_modal from '@/components/product/product_guige_choose_modal.vue'

import {
	mapState
} from "vuex";

export default {
	name: "modal-hetong",
	components: {
		product_guige_choose_modal
	},
	data() {
		return {
			show: false,
			info: {

			},
			form: {
				storeId: '',
				type: 1,
				typeDesc: '',
				remark: '',
				applyName: '',
				productInfo: '',
			},
			storeList: [],


			list_product: [],
		};
	},
	computed: {},
	watch: {

	},
	created() {
		this.query_store()
	},
	methods: {
		query_store() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "kucun_getStoreList",
				}
			}).then(res => {
				if (res.code == 200) {
					this.storeList = res.data.list || []
					if (this.storeList.length) {
						this.form.storeId = this.storeList[0].id
					}
				}
			})
		},

		init(row) {
			if (row) {
				this.info = row || {}
				this.form = {

				}
			} else {

			}
			this.show = true;
		},
		on_before_close() {
			this.show = false;
		},
		on_closed() {
			this.form = {
				storeId: '',
				type: '',
				typeDesc: '',
				remark: '',
				applyName: '',
				productInfo: '',
			}
		},
		do_submit() {
			let productInfo_arr = this.list_product.map(v => ({
				"inventoryId": v.id,
				"productId": v.productId,
				"num": v.action_num
			}))
			let productInfo = JSON.stringify(productInfo_arr)

			// if (!this.form.storeId) {
			// 	alertErr("请选择仓库");
			// 	return;
			// }
			if (!this.form.type) {
				alertErr("请选择类型");
				return;
			}
			if (!this.form.typeDesc) {
				alertErr("请填写操作类型");
				return;
			}
			if (!this.form.applyName) {
				alertErr("请填写申请人");
				return;
			}
			if (!this.list_product.length) {
				alertErr("请选择商品");
				return;
			}


			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "kucun_formSave",
					...this.form,
					productInfo: productInfo
				}
			}).then(res => {
				if (res.code == 200) {
					this.$emit('confirm')
					this.show = false
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			})
		},

		// 选择相关商品
		do_add_product() {
			this.$refs.product_guige_choose_modal.init()
		},
		confirm_choose_guige(items) {
			this.$log('追加已选商品', items)

			let new_items = JSON.parse(JSON.stringify(items))
			new_items.forEach(v => {
				v.action_num = '';
			})
			this.list_product = this.list_product.concat(new_items)
		},

		handleSelectionChange1(items) {
			console.log("已选产品", items);
			this.select_items = items;
		},
		product_remove(row) {
			let index = this.list_product.findIndex(v => v.id == row.id)
			this.list_product.splice(index, 1)
		},

	},
};
</script>

<style scoped lang="less">
/deep/ .modal-points-add {
	// margin-top: 80px !important;
	.modal-inner {
		padding: 0;
	}

	.el-dialog__header {
		.flex-between();
		border-bottom: 1px solid #eee;
		background: #a98c4d;
		background: #f7f7f7;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 18px;
		color: #333;

		.el-dialog__title {
			color: #000;
		}

		.el-dialog__headerbtn {

			// top: 0;
			.el-dialog__close {
				color: #000;
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__footer {
		text-align: center;
	}



	.modal-ctx {
		padding: 30px 50px;
		max-height: 60vh;
		overflow-y: auto;
		border-bottom: 1px solid #ddd;

		.tip {
			margin-bottom: 20px;
			color: #444;
			font-size: 14px;
		}

		.input-box {
			margin-bottom: 15px;
			position: relative;

			&.flex {
				display: flex;
				align-items: flex-start;
				// align-items: center;

				.label {
					margin-bottom: 0;
				}
			}

			.label {
				min-width: 120px;
				// margin-right: 20px;
				margin-bottom: 20px;
				font-size: 14px;
				color: #6e7285;
			}

			.input-item {
				flex: 1;
				display: flex;
				align-items: center;


				.el-input {
					width: 220px;
					width: 100%;
				}

				.el-select {
					width: 100%;
				}
			}
		}
	}

	.upload-ctx {
		margin: 20px 0;
	}

	.btn-send {}
}
</style>